<template>
  <div>
    <div class="appcontainer">
      <!-- 工单编号行 -->
      <div class="search">
        <el-form :inline="true" :model="pageObj" class="demo-form-inline">
          <el-form-item label="工单编号:">
            <el-input v-model="pageObj.taskCode" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item label="活动区域:">
            <el-select v-model="pageObj.status" clearable placeholder="请输入">
              <el-option
                v-for="item in workorder"
                :key="item.statusId"
                :label="item.statusName"
                :value="item.statusId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 主体内容 -->
      <div class="result">
        <!-- 新建 工单配置行 -->
        <div class="operation">
          <el-row>
            <el-button
              size="medium"
              icon="el-icon-circle-plus-outline"
              class="one"
              @click="dialogVisible = true"
            >新建</el-button>
            <el-button size="small" class="two" @click="gongdan">工单配置</el-button>
          </el-row>
        </div>
        <!-- 表格数据 -->
        <div>
          <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-style="{ height: '44px' }"
              :cell-style="{ padding: '3px' }"
            >
              <el-table-column
                label="序号"
                type="index"
                :index="indexMethod"
                width="80"
              />
              <el-table-column prop="taskCode" label="工单编号" width="132" />
              <el-table-column prop="innerCode" label="设备编号" width="131" />
              <el-table-column
                prop="taskType.typeName"
                label="工单类型"
                width="131"
              />
              <el-table-column prop="createType" label="工单方式" width="131" />
              <el-table-column
                prop="taskStatusTypeEntity.statusName"
                label="工单状态"
                width="131"
              />
              <el-table-column prop="userName" label="运营人员" width="131" />
              <el-table-column prop="createTime" label="创建日期" width="160" />
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    class="detail"
                    @click="handleClick(scope.row)"
                  >查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- 新增工单   -->
      <el-dialog
        title="新增工单"
        :visible="dialogVisible"
        width="630px"
        @close="closeffn"
      >
        <el-form ref="departRef" :rules="addForm" :model="newAdd" label-width="100px">
          <el-form-item label="设备编号:" prop="innerCode">
            <el-input
              v-model="newAdd.innerCode"
              type="text"
              placeholder="请输入内容"
              maxlength="15"
              @input="inputFn"
            />
          </el-form-item>
          <el-form-item label="工单类型:" prop="productType">
            <el-select v-model="newAdd.productType" placeholder="请选择">
              <el-option
                v-for="item in type"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="补货数量:" prop="innerCode">
            <!-- <template #default="scope"> -->
            <el-button type="text" @click="detailed(newAdd)">补货清单</el-button>
            <!-- </template> -->
          </el-form-item>
          <el-form-item label="运营人员:" prop="userId">
            <el-select v-model="newAdd.userId" placeholder="请选择">
              <el-option
                v-for="item in ruleForm.userName"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="desc">
            <el-input v-model="newAdd.desc" style="min-height: 33px" placeholder="请输入备注(不超过40字)" type="textarea" />
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增工单  补货数量:补货清单  -->
      <el-dialog
        title="补货详情"
        :visible="xiangqing"
        width="630px"
        @close="detailedFn"
      >
        <el-scrollbar :min-size="0" :always="false" style="height: 330px;">
          <el-table
            :data="newAdd.details"
            style="width: 100%"
          >
            <el-table-column
              prop="channelCode"
              label="货道编号"
              width="92"
            />
            <el-table-column
              prop="sku.skuName"
              label="商品名称"
              width="92"
            />
            <el-table-column
              prop="currentCapacity"
              label="当前数量"
              width="92"
            />
            <!-- 还可添加 数据待修改 -->
            <el-table-column
              prop="maxCapacity"
              label="还可添加"
              width="92"
            />
            <el-table-column
              label="补满数量"
              width="200"
            >
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.maxCapacity"
                  controls-position="right"
                  :min="0"
                  :max="scope.row.maxCapacity"
                  @change="handleChange(scope.row)"
                >{{ scope.row.maxCapacity }}</el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
        <span slot="footer" class="dialog-footer">
          <el-button @click="detailedFn">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 工单配置  -->
      <el-dialog
        title="工单配置"
        :visible="dialogshow"
        width="30%"
      >
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogshow = false">取 消</el-button>
          <el-button type="primary" @click="dialogshow = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-col class="pstion">
          共{{ totalCount }}条记录
          第{{ pageObj.pageIndex }}/{{ totalPage }}页
        </el-col>
        <el-pagination
          :page-size="pageObj.pageSize"
          :total="totalCount"
          :current-page="pageObj.pageIndex"
          layout="prev,next"
          prev-text="上一页"
          next-text="下一页"
          @current-change="currentChangeFn"
        />
      <!-- </div> -->
      </el-row>
    </div>
    <!-- 查看详情  -->
    <el-dialog title="工单详情" :visible="outerVisible" @close="close">
      <div class="task-status">
        <img class="icon" src="" alt="">
        <span class="status">{{ fromData.statusName }}</span>
        <img class="pic" src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
      </div>
      <el-form :model="fromData" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号:" prop="innerCode">{{ fromData.innerCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建日期:" prop="createTime">{{ formateTime(fromData.createTime) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取消日期:" prop="updateTime">{{ formateTime(fromData.updateTime) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运营人员:" prop="userName">{{ fromData.userName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单类型:" prop="typeName">{{ fromData.typeName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补货数量:" prop="">
              <el-button type="text" @click="getBuhuo">补货详情</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单方式:" prop="createType">{{ fromData.createType }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取消原因:" prop="">{{ fromData.cancelReason }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="two" @click="dialogVisible = true">重新创建</el-button>
      </div>
    </el-dialog>
    <!-- 补货数量:补货详情  -->
    <el-dialog
      title="补货详情"
      :visible="buhuo"
      width="630px"
      @close="closeFn"
    >
      <el-scrollbar :min-size="0" :always="false" style="height: 330px;">
        <el-table
          :data="ReplenishmentList"
          style="width: 100%"
        >
          <el-table-column
            prop="channelCode"
            label="货道编号"
            width="184"
          />
          <el-table-column
            prop="skuName"
            label="商品"
            width="184"
          />
          <el-table-column
            prop="expectCapacity"
            label="补货数量"
            width="184"
          />
        </el-table>
      </el-scrollbar>
    </el-dialog>

  </div>
</template>

<script>
//      AlertValue 预警值
import { worKorder, workSearch, ReplenishmentDetails, WorkOrderType, getOperators, VendingMachine, getCreatejob } from '@/api'
import dayjs from 'dayjs'
export default {
  name: 'Business',
  data() {
    return {
      // 新增 补货 dialog 显示隐藏变量
      xiangqing: false,

      // 补货详情dialog 显示隐藏变量
      ReplenishmentList: [], // 详情数据/
      buhuo: false,
      taskId: '',

      // 工单配置 显示隐藏变量
      dialogshow: false,
      // 查看详情 显示隐藏变量
      outerVisible: false,
      // 新建  dialog显示隐藏变量
      dialogVisible: false,

      // 活动区域
      workorder: [{
        statusId: '',
        statusName: ''
      }],

      // 新建工单 +  校验数据
      newAdd: {
        createType: 1, // 类型
        innerCode: '',
        userId: '',
        assignorId: 45,
        productType: '',
        desc: '',
        details: [] //  新增工单中 补货清单数据
      },
      detailsList: [], // 创建工单 需提交数据 给到newAdddetails
      // 请求运营人员
      ruleForm: {
        name: '',
        typee: '', // 工单类型
        userName: [], // 运营人员
        introduce: ''
      },
      addForm: {
        innerCode: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        productType: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请输入' }
        ],
        // typee: [
        //   { required: true, message: '请选择', trigger: 'change' }
        // ],
        userId: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      // 查看详情 数据
      fromData: {
        innerCode: '', // 设备编号
        createTime: '', // 创建日期
        updateTime: '', // 取消日期
        userName: '', // 运营人员
        typeName: '', // 工单类型
        // 补货数量空
        createType: '' // 工单方式
        // innerCode: '' // 取消原因
      },

      // 分页参数
      pageObj: {
        pageIndex: 1, // 当前页数
        pageSize: 10, // 每页显示数量
        taskCode: '', // 工单编号
        status: '' // 工单状态
      },
      // 总条数
      totalCount: 0,
      // 总页数
      totalPage: 0,
      // 总数据
      tableData: [],
      // 工单类型
      type: []
    }
  },
  async created() {
    // 工单状态
    const res = await worKorder()
    // console.log(res)
    this.workorder = res

    // 工单类型
    const res2 = await WorkOrderType()
    console.log(res2)
    this.type = res2

    // 工单搜索  工单搜索 传参，下方点击，每页
    this.getworkSearch(this.pageObj)
  },
  methods: {
    // 详情中计数器
    handleChange(val) {
      console.log(val)
      this.newAdd.details = val
    },
    // 补货详情 详情！！！  dialog
    async detailed(val) {
      console.log(val.innerCode)
      if (!this.newAdd.innerCode) {
        // 当没有输入设备编号时，触发设备编号输入框的检验，并返回
        // fields 为选中 表单第一个输入框
        this.$refs.departRef.fields[0].error = '请输入'
        return
      }
      this.xiangqing = true
      // 转换 请求 数据参数名
      // const innerCode = val.introduce
      const res = await VendingMachine(val.innerCode)
      console.log(res)
      this.newAdd.details = res
    },
    // 补货详情 确定按钮
    determine() {
      this.xiangqing = false
    },
    detailedFn() {
      this.xiangqing = false
    },
    // input 输入值发送请求  用设备编号 请求运营人员
    async inputFn(value) {
      // console.log(value)
      const res = await getOperators(value)
      // console.log(res)
      this.ruleForm.userName = res
      // console.log(this.ruleForm.userName)
      // console.log(res[0].userName)
    },
    // 新增工单 关闭弹窗
    closeffn() {
      this.dialogVisible = false
      // 关闭清空表单
      // this.$refs.ruleForm.resetFields()
    },
    // 新增工单确定按钮  !!!!!
    submitForm() {
      // 兜底校验
      this.$refs.departRef.validate(async(valid) => {
        if (!valid) return
        const res = await getCreatejob(...this.newAdd)
        console.log(res)
      })
    },
    // 工单配置隐藏 显示
    gongdan() {
      this.dialogshow = true
    },
    // 格式化时间
    formateTime(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // dialog 显示隐藏
    close() {
      this.outerVisible = false
    },
    // 封装请求 工单搜索
    async getworkSearch(data) {
      const res2 = await workSearch(data)
      // console.log(res2)
      // this.tableData = res2
      // 分页  取回分页所需参数为字符串，此处强制转成数字型
      this.pageObj.pageIndex = Number(res2.pageIndex)// 当前页数
      this.pageObj.pageSize = Number(res2.pageSize)// 每页显示数量
      // 总条数
      this.totalCount = Number(res2.totalCount)
      // 总页数
      this.totalPage = Number(res2.totalPage)
      // 总数据
      this.tableData = res2.currentPageRecords
      // console.log(this.tableData)

      // 工单方式 类型0/1 判断
      this.tableData.forEach(item => {
        if (item.createType === 0) {
          item.createType = '手动'
        } else {
          item.createType = '自动'
        }
        // 时间格式化
        item.createTime = dayjs(item.createTime).format(
          'YYYY.MM.DD HH:mm:ss'
        )
      })
    },
    // 序号
    indexMethod(index) {
      return index + 1
    },
    // 工单编号 活动区域查询 事件
    async onSubmit() {
      console.log('submit!')
      await this.getworkSearch(this.pageObj)
    },
    // 查看详情 事件
    handleClick(row) {
      this.outerVisible = true
      // row 点击拿到每行数据
      // console.log(row)

      // 补货数量所需id
      this.taskId = row.taskId

      // 查看详情数据
      this.fromData = {
        statusName: row.taskStatusTypeEntity.statusName, // 取消/待办
        innerCode: row.innerCode, // 设备编号
        createTime: row.createTime, // 创建日期
        updateTime: row.updateTime, // 取消日期
        userName: row.userName, // 运营人员
        typeName: row.taskType.typeName, // 工单类型
        createType: row.createType, // 工单方式
        cancelReason: '' // 取消原因
      }
    },
    // 补货数量:补货详情
    async getBuhuo() {
      this.buhuo = true
      // 补货数量:补货详情请求  所需数据在点击返回的row中
      const res = await ReplenishmentDetails(this.taskId)
      // console.log(res)
      this.ReplenishmentList = res
    },
    // 补货详情弹窗
    closeFn() {
      this.buhuo = false
    },
    // 分页 点击下页 刷新页面输三局
    currentChangeFn(val) {
      // console.log(val)
      this.pageObj.pageIndex = val
      this.getworkSearch(this.pageObj)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #fff;
  .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #909399;
}
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
::v-deep .box{
  border-radius: 10px;
}
.task-status {
  // display: -webkit-box;
  //   display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    align-items: center;
    height: 54px;
    margin-bottom: 25px;
    background-color: hsla(0,0%,92.5%,.39);
    .icon{
      margin-left: 22px;
    }
    .status{
      -webkit-box-flex: 1;
      flex: 1;
      margin-left: 16px;
      color: rgba(0,0,0,.85);
    }
    .pic{
      margin-right: 76px;
      margin-bottom: 7px;
    }
}

.pstion{
  color: #dbdfe5;
}
// .pagination-container {
//     background: #fff;
//     padding: 32px 16px;
// }
.el-select {
  width: 100%;
}
.el-dialog {
  border-radius: 10px;
}
.app-containe {
  position: relative;
}
.search {
  display: flex;
  display: -webkit-box;
  background: #fff;
  height: 64px;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
}
.demo-form-inline {
  height: 36px;
}
// .el-button {
//   // background: #5f84ff;
// }
// 新建
.result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .operation {
    margin-bottom: 20px;
    .one {
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      color: #fff;
    }
    .two{
          background-color: #fbf4f0!important;
    }
  }

}
</style>
